<template>
    <view class="men">
        <view class="almost-lottery">
            <!-- head -->
            <view class="almost-lottery__head">
                <image class="t-wan" src="http://119.254.154.50:38081/giftApi/mystatic/wenan.png"></image>
                <image class="t-wan-lp" src="http://119.254.154.50:38081/giftApi/mystatic/hengfu.png"></image>
            </view>

            <!-- lottery -->
            <view class="almost-lottery__wheel">
                <almost-lottery
                    :lottery-size="lotteryConfig.lotterySize"
                    :action-size="lotteryConfig.actionSize"
                    :ring-count="2"
                    :duration="1"
                    :self-rotaty="false"
                    :img-width="100"
                    :img-height="100"
                    :str-margin-outside="60"
                    :img-margin-str="10"
                    :str-font-size="25"
                    :colors="['#fee08c', '#fef2cd']"
                    :str-font-colors="['#444']"
                    :str-line-len="10"
                    :img-circled="true"
                    :canvasCached="true"
                    :prize-list="prizeList"
                    :prize-index="prizeIndex"
                    @draw-before="handleDrawBefore"
                    @draw-start="handleDrawStart"
                    @draw-end="handleDrawEnd"
                    @finish="handleDrawFinish"
                    v-if="prizeList.length" />
                <!-- <view class="almost-lottery__count">
        <text class="text">剩余免费抽奖 {{ freeNum }} 次</text>
      </view> -->
            </view>
            <!-- rule -->
            <view class="almost-lottery__rule">
                <view class="rule-head" v-if="isLogin" @click.stop="gotoVideo">
                    <text class="title">看视频赢大奖</text>
                </view>
                <view class="rule-head" v-else>
                    <button class="title" open-type="getPhoneNumber" @getphonenumber="handlePhonenumber">
                        看视频赢大奖
                    </button>
                </view>

                <view class="rule-body">
                    <view class="item">
                        <view class="number">1</view>
                        <view class="text">
                            <text>抽奖细则：</text>
                            <text>每人拥有{{ freeNumDay }}次抽奖机会。</text>
                        </view>
                    </view>
                    <view class="item item-rule">
                        <view class="number">2</view>
                        <view class="text">
                            <text>奖励说明：</text>
                            <text>1.实物奖：环球影城门票</text>
                            <text>2.实物奖：HUAWEI WATCH。</text>
                            <text>3.实物奖：笔记本电脑。</text>
                        </view>
                    </view>
                    <template v-if="isApple">
                        <view class="item">
                            <view class="number">3</view>
                            <view class="text">本次活动由XXXXXXX发起，与Apple.Inc无关。</view>
                        </view>
                        <view class="item">
                            <view class="number">4</view>
                            <view class="text">苹果公司不是本活动的赞助商且没有以任何形式参与活动。</view>
                        </view>
                        <view class="item">
                            <view class="number">5</view>
                            <view class="text">本活动仅限17岁以上用户参加。</view>
                        </view>
                        <view class="item">
                            <view class="number">6</view>
                            <view class="text">本活动最终解释权归XXXXXXX所有。</view>
                        </view>
                    </template>
                    <template v-else>
                        <view class="item">
                            <view class="number">3</view>
                            <view class="text">本次活动由工商银行北京珠市口支行发起。</view>
                        </view>
                        <view class="item">
                            <view class="number">4</view>
                            <view class="text">活动时间：2024年9月7日</view>
                        </view>
                        <!-- <view class="item">
                        <view class="number">5</view>
                        <view class="text">本活动最终解释权归XXXXXXX所有。</view>
                    </view> -->
                    </template>
                </view>
            </view>
            <!--我的奖品-->
            <view class="liheContent" @click.stop="myHandler">
                <image class="lihestyle" src="http://119.254.154.50:38081/giftApi/mystatic/lihe.png"></image>
                <view class="lihefont">我的奖品</view>
            </view>
            <!--看视频-->
            <!-- <view class="liheContent" style="right: 0; text-align: right" @click.stop="gotoVideo">
            <image class="lihestyle" src="http://119.254.154.50:38081/giftApi/mystatic/icon.png"></image>
            <view class="lihefont2">看视频,赢大奖</view>
        </view> -->

            <!--登记手机号-->
            <up-transition :show="isphone" mode="zoom-in">
                <view class="tanchuang">
                    <view class="tanchuang_top">
                        <text class="tanchuang_top_title">填写个人信息去抽奖</text>
                        <image
                            class="lihestyle tanchuang_top_img"
                            src="http://119.254.154.50:38081/giftApi/mystatic/icon.png"></image>
                    </view>
                    <view class="register">
                        <image
                            class="close"
                            src="http://119.254.154.50:38081/giftApi/mystatic/close.png"
                            @click="isphone = false"></image>
                        <view class="register_block">
                            <text class="register_text">姓名</text>
                            <up-input
                                :customStyle="{ background: '#FFF' }"
                                placeholder="请输入姓名"
                                border="surround"
                                v-model="form.name"
                                @change="change"></up-input>
                        </view>
                        <view class="register_block">
                            <text class="register_text">手机号</text>
                            <up-input
                                :customStyle="{ background: '#FFF' }"
                                placeholder="请输入手机号"
                                border="surround"
                                type="number"
                                v-model="form.phone"
                                @change="change"></up-input>
                        </view>
                        <up-button :customStyle="buttonStyle" text="去抽奖" @click="submitHandler"></up-button>
                    </view>
                </view>
            </up-transition>

            <!-- 抽奖结束弹窗 -->
            <kevy-mask :show="isShowAwd" @click="closeChuang">
                <view class="t-full t-flex-row">
                    <view class="t-tk-modal">
                        <view
                            class="t-tk-bg t-bg-full"
                            style="background-image: url('http://119.254.154.50:38081/giftApi/mystatic/tankuang.png')">
                            <view v-if="winningIndex == 5" class="t-xxcy t-flex-col-s">
                                <image src="http://119.254.154.50:38081/giftApi/mystatic/xiexiecanyu.png"></image>
                                <view class="t-xxcy-ts t-flex-row">再努力努力肯定就会中哦~</view>
                            </view>
                            <view v-if="winningIndex != -1 && winningIndex != 5" class="t-tk-zj t-flex-col-s">
                                <image
                                    class="t-tk-zj-tip"
                                    src="http://119.254.154.50:38081/giftApi/mystatic/luck/wenzi.png"></image>
                                <view class="t-tk-zj-desc t-flex-col">
                                    <image class="t-zj-jp" :src="prizeList[winningIndex].prizeImage"></image>
                                    <view class="t-zj-jp-desc">{{ prizeList[winningIndex].prizeName }}</view>
                                </view>
                            </view>
                        </view>
                        <view
                            v-if="isTkBtn"
                            @click="toConfirmAwd"
                            class="t-tk-btn t-bg-full"
                            style="background-image: url('http://119.254.154.50:38081/giftApi/mystatic/xiaoanniu.png')">
                            {{ winningIndex > 0 ? "领取" : "确定" }}
                        </view>
                    </view>
                </view>
            </kevy-mask>
        </view>
    </view>
</template>

<script>
import api from "@/api";
import useUserStore from "@/store";
import AlmostLottery from "@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue";
import { clearCacheFile, clearStore } from "@/uni_modules/almost-lottery/utils/almost-utils.js";
import kevyMask from "@/components/kevy-mask/kevy-mask.vue";
const useUserStoreDone = useUserStore.user.useUserStore();
import { test } from "uview-plus";
export default {
    name: "Home",
    components: {
        AlmostLottery,
        kevyMask,
    },
    data() {
        return {
            winningIndex: -1,
            winning: undefined,
            //奖品榜单id
            listId: undefined,
            //用户提交表单
            form: {
                name: "",
                phone: "",
            },
            //按钮样式
            buttonStyle: {
                marginTop: "40px",
                background: "#ffdd12",
                borderRadius: "24px",
                color: "#444444",
                fontWeight: "700",
            },
            //--登记手机号--
            isphone: false,
            //奖品弹窗
            isShowAwd: false,
            // 开启调试模式
            isDev: true,
            // 以下是转盘配置相关数据
            lotteryConfig: {
                // 抽奖转盘的整体尺寸，单位rpx
                lotterySize: 650,
                // 抽奖按钮的尺寸，单位rpx
                actionSize: 200,
            },

            // 以下是转盘 UI 配置
            // 转盘外环图，如有需要，请参考替换为自己的设计稿
            lotteryBg: "http://119.254.154.50:38081/giftApi/mystatic/lottery-bg.png",
            // 抽奖按钮图
            actionBg: "http://119.254.154.50:38081/giftApi/mystatic/action-bg.png",

            // 以下是奖品配置数据
            // 奖品数据
            prizeList: [],
            // 奖品是否设有库存
            onStock: true,
            // 中奖下标
            prizeIndex: -1,

            // 是否正在抽奖中，避免重复触发
            prizeing: false,

            // 以下为中奖概率有关数据
            // 是否由前端控制概率，默认不开启，强烈建议由后端控制
            onFrontend: false,
            // 权重随机数的最大值
            prizeWeightMax: 0,
            // 权重数组
            prizeWeightArr: [],

            // 以下为业务需求有关示例数据
            // 金币余额
            goldCoin: 1,
            // 当日免费抽奖次数余额
            freeNum: 1,
            // 每次消耗的金币数
            goldNum: 1,
            // 每天免费抽奖次数
            freeNumDay: 1,
        };
    },
    computed: {
        isApple() {
            // return uni.getSystemInfoSync().platform === 'ios'
            return false;
        },
        isLogin() {
            // return uni.getSystemInfoSync().platform === 'ios'
            return useUserStore.user.useUserStore().token;
        },
        isTkBtn() {
            console.log(this.winningIndex);
            return (
                this.winningIndex != -1 &&
                this.prizeList[this.winningIndex].prizeName !== "谢谢参与" &&
                this.prizeList[this.winningIndex].receive === 0
            );
        },
    },
    methods: {
        handlePhonenumber(detail) {
            if (detail.detail.errMsg != "getPhoneNumber:ok") {
                uni.showToast({
                    title: "授权失败",
                    mask: true,
                    icon: "none",
                });
                return;
            }

            // if (!this.form.name) {
            //     uni.showToast({
            //         title: "姓名必填",
            //         icon: "none",
            //     });
            //     return;
            // }
            // if (!this.form.phone) {
            //     uni.showToast({
            //         title: "手机号必填",
            //         icon: "none",
            //     });
            //     return;
            // }

            // if (!test.mobile(this.form.phone)) {
            //     uni.showToast({
            //         title: "手机号格式不正确！",
            //         icon: "none",
            //     });
            //     return;
            // }

            useUserStoreDone.loginByWxPhone({ name: "微信用户", code: detail.detail.code }).then((res) => {
                this.isphone = false;
                uni.showToast({
                    title: "登录成功！",
                    icon: "success",
                });
                this.form.name = "";
                this.form.phone = "";
            });
        },
        // 重新生成
        handleInitCanvas() {
            clearCacheFile();
            clearStore();

            this.prizeList = [];
            this.getPrizeList();
        },
        // 通过 popup 打开
        handleCheckPopup() {
            uni.navigateTo({
                url: "/pages/popup/popup",
            });
        },
        // 获取奖品列表
        async getPrizeList() {
            uni.showLoading({
                title: "奖品准备中...",
            });

            // 等待接口返回的数据进一步处理
            let res = await this.requestApiGetPrizeList();
            console.log("获取奖品列表", res);

            if (res.ok) {
                let data = res.data;
                if (data.length) {
                    this.prizeList = data;
                    console.log("已获取到奖品列表数据，开始绘制抽奖转盘");

                    // 计算开始绘制的时间
                    if (console.time) {
                        console.time("绘制转盘用时");
                    }

                    // 如果开启了前端控制概率
                    // 得出权重的最大值并生成权重数组
                    if (this.onFrontend) {
                        // 生成权重数组并排序取得最大值
                        this.prizeWeightArr = this.prizeList.map((item) => item.prizeWeight);
                        let prizeWeightArrSort = [...this.prizeWeightArr];
                        prizeWeightArrSort.sort((a, b) => b - a);

                        // 开放自定义权重最大值，没有自定义则取权重数组中的最大值
                        this.prizeWeightMax = this.prizeWeightMax > 0 ? this.prizeWeightMax : prizeWeightArrSort[0];
                    }
                }
            } else {
                uni.hideLoading();
                uni.showToast({
                    title: "获取奖品失败",
                    mask: true,
                    icon: "none",
                });
            }
        },
        // 模拟请求 获取奖品列表 接口，
        // 注意这里返回的是一个 Promise
        // 大哥，这里只是模拟，别告诉我你不会对接自己的接口
        requestApiGetPrizeList() {
            return new Promise((resolve, reject) => {
                let requestTimer = setTimeout(() => {
                    clearTimeout(requestTimer);
                    requestTimer = null;

                    // prizeStock 奖品库存
                    // prizeWeight 中奖概率，数值越大中奖概率越高，权重一样时随机中奖
                    // receive 是否领取奖品
                    resolve({
                        ok: true,
                        data: [
                            {
                                prizeId: 1,
                                prizeName: "环球影城门票",
                                prizeStock: 1,
                                prizeWeight: 1,
                                prizeImage: "http://119.254.154.50:38081/giftApi/mystatic/huanqiu.jpg",
                                receive: 0,
                            },

                            {
                                prizeId: 3,
                                prizeName: "谢谢参与",
                                prizeStock: 100,
                                prizeWeight: 100,
                                prizeImage: "http://119.254.154.50:38081/giftApi/mystatic/xiexiecanyu.png",
                                receive: 0,
                            },
                            {
                                prizeId: 4,
                                prizeName: "HUAWEI WATCH",
                                prizeStock: 1,
                                prizeWeight: 1,
                                prizeImage: "http://119.254.154.50:38081/giftApi/mystatic/watch.jpg",
                                receive: 0,
                            },
                            {
                                prizeId: 2,
                                prizeName: "谢谢参与",
                                prizeStock: 100,
                                prizeWeight: 100,
                                prizeImage: "http://119.254.154.50:38081/giftApi/mystatic/xiexiecanyu.png",
                                receive: 0,
                            },
                            {
                                prizeId: 5,
                                prizeName: "笔记本电脑",
                                prizeStock: 1,
                                prizeWeight: 1,
                                prizeImage:
                                    "https://p6.itc.cn/q_70/images03/20210514/d204da6ee93f42b39e973c62458f0960.jpeg",
                                receive: 0,
                            },
                            {
                                prizeId: 6,
                                prizeName: "谢谢参与",
                                prizeStock: 100,
                                prizeWeight: 100,
                                prizeImage: "http://119.254.154.50:38081/giftApi/mystatic/xiexiecanyu.png",
                                receive: 0,
                            },
                        ],
                    });
                }, 200);
            });
        },
        // 抽奖开始之前
        async handleDrawBefore(callback) {
            if (!useUserStore.user.useUserStore().token) {
                this.isphone = true;
                return;
            }

            let res = await api.gift.verification();
            if (res.condition === 1) {
                uni.showToast({
                    title: "抽奖机会已用完,请查看我的奖品",
                    icon: "none",
                });
                return;
            } else if (res.condition === 3) {
                uni.showToast({
                    title: "您没有抽奖机会,请观看视频获取",
                    icon: "none",
                });
                return;
            } else {
                this.winning = res.condition;
                this.listId = res.listId;
            }
            console.log("抽奖开始之前");
            let flag = false;

            // 还有免费数次或者剩余金币足够抽一次
            if (this.freeNum > 0 || this.goldCoin >= this.goldNum) {
                // 更新免费次数或金币余额
                if (this.freeNum > 0) {
                    this.freeNum--;
                } else if (this.goldCoin >= this.goldNum) {
                    this.goldCoin -= this.goldNum;
                }

                flag = true;
            } else {
                flag = false;
                uni.showToast({
                    title: "抽奖机会已用完",
                    icon: "none",
                });
                // uni.showModal({
                // 	title: '金币不足',
                // 	content: '是否前往赚取金币？',
                // 	success: (res) => {
                // 		// 这里需要根据业务需求处理，一般情况下会引导用户前往赚取金币的页面
                // 		console.log('金币不足', res)
                // 	}
                // })
            }

            callback(flag);
        },
        // 本次抽奖开始
        handleDrawStart() {
            console.log("触发抽奖按钮");
            if (this.prizeing) return;
            this.prizeing = true;
            this.tryLotteryDraw();
        },
        // 尝试发起抽奖
        tryLotteryDraw() {
            console.log("旋转开始，获取中奖下标......");
            // 判断是否由前端控制概率
            if (this.onFrontend) {
                this.localGetPrizeIndex();
            } else {
                this.remoteGetPrizeIndex();
            }
        },
        // 本地获取中奖下标
        localGetPrizeIndex() {
            console.warn("###当前处于前端控制中奖概率，安全起见，强烈建议由后端控制###");
            // 前端控制概率的情况下，需要拿到最接近随机权重且大于随机权重的值
            // 后端控制概率的情况下，通常会直接返回 prizeId
            if (!this.prizeWeightMax || !this.prizeWeightArr.length) {
                console.warn("###当前已开启前端控制中奖概率，但是奖品数据列表中的 prizeWeight 参数似乎配置不正确###");
                return;
            }
            console.log("当前权重最大值为 =>", this.prizeWeightMax);

            // 注意这里使用了 Math.ceil，如果某个权重的值为 0，则始终无法中奖
            let randomWeight = Math.ceil(Math.random() * this.prizeWeightMax);
            console.log("本次权重随机数 =>", randomWeight);

            // 生成大于等于随机权重的数组
            let tempMaxArrs = [];
            this.prizeList.forEach((item) => {
                if (item.prizeWeight >= randomWeight) {
                    tempMaxArrs.push(item.prizeWeight);
                }
            });
            console.log("tempMaxArrs", tempMaxArrs);

            // 如果大于随机权重的数组有值，先对这个数组排序然后取值
            // 反之新建一个临时的包含所有权重的已排序数组，然后取值
            let tempMaxArrsLen = tempMaxArrs.length;
            if (tempMaxArrsLen) {
                tempMaxArrs.sort((a, b) => a - b);
                // 取值时，如果存在多个值，分两种情况
                if (tempMaxArrsLen > 1) {
                    // 检查是否存在重复的值
                    let sameCount = 0;
                    for (let i = 0; i < tempMaxArrs.length; i++) {
                        if (tempMaxArrs[i] === tempMaxArrs[0]) {
                            sameCount++;
                        }
                    }

                    // 值不相等的情况下取最接近的值，也就是第1个值
                    if (sameCount === 1) {
                        this.prizeIndex = this.prizeWeightArr.indexOf(tempMaxArrs[0]);
                        this.winningIndex = this.prizeIndex;
                    } else {
                        // 存在值相等时，随机取值，当然这里你可以自己决定是否随机取值
                        let sameWeight = tempMaxArrs[0];
                        let sameWeightArr = [];
                        let sameWeightItem = {};
                        this.prizeWeightArr.forEach((item, index) => {
                            if (item === sameWeight) {
                                sameWeightArr.push({
                                    prizeWeight: item,
                                    index,
                                });
                            }
                        });
                        console.log("sameWeightArr", sameWeightArr);
                        sameWeightItem = sameWeightArr[Math.floor(Math.random() * sameWeightArr.length)];
                        console.log("sameWeightItem", sameWeightItem);
                        this.prizeIndex = sameWeightItem.index;
                        this.winningIndex = sameWeightItem.index;
                    }
                } else {
                    this.prizeIndex = this.prizeWeightArr.indexOf(tempMaxArrs[0]);
                    this.winningIndex = this.prizeWeightArr.indexOf(tempMaxArrs[0]);
                }
            }

            console.log("本次抽中奖品 =>", this.prizeList[this.prizeIndex].prizeName);
            // 如果奖品设有库存
            if (this.onStock) {
                console.log("本次奖品库存 =>", this.prizeList[this.prizeIndex].prizeStock);
            }
        },
        // 远程请求接口获取中奖下标
        // 大哥，这里只是模拟，别告诉我你不会对接自己的接口
        remoteGetPrizeIndex() {
            console.warn("###当前处于模拟的请求接口，并返回了中奖信息###");
            // 模拟请求接口获取中奖信息
            let stoTimer = setTimeout(() => {
                stoTimer = null;

                let list = [...this.prizeList];

                // 这里随机产生的 prizeId 是模拟后端返回的 prizeId
                // let prizeId = Math.floor(Math.random() * list.length + 1)
                let prizeId = this.winning;
                // 拿到后端返回的 prizeId 后，开始循环比对得出那个中奖的数据
                for (let i = 0; i < list.length; i++) {
                    let item = list[i];
                    if (item.prizeId === prizeId) {
                        // 中奖下标
                        this.prizeIndex = i;
                        this.winningIndex = i;
                        break;
                    }
                }

                console.log("本次抽中奖品 =>", this.prizeList[this.prizeIndex].prizeName);
                // 如果奖品设有库存
                if (this.onStock) {
                    console.log("本次奖品库存 =>", this.prizeList[this.prizeIndex].prizeStock);
                }

                //定完清空
                this.winning = undefined;
            }, 200);
        },
        // 本次抽奖结束
        async handleDrawEnd() {
            console.log("旋转结束，执行拿到结果后到逻辑");
            // 旋转结束后，开始处理拿到结果后的逻辑
            let prizeName = this.prizeList[this.prizeIndex].prizeName;
            let tipContent = "";

            if (prizeName === "谢谢参与") {
                tipContent = "很遗憾，没有中奖，请再接再厉！";
            } else {
                // 如果奖品设有库存
                if (this.onStock) {
                    let prizeStock = this.prizeList[this.prizeIndex].prizeStock;
                    tipContent = prizeStock
                        ? `恭喜您，获得 ${prizeName}`
                        : `很抱歉，您来晚了，当前奖品 ${prizeName} 已无库存`;
                } else {
                    tipContent = `恭喜您，获得 ${prizeName} ！`;
                }
            }
            //转盘结束添加记录
            // let param = {
            //     gdGoodId: this.prizeList[this.prizeIndex].prizeId,
            //     date: new Date(),
            //     receive: this.prizeList[this.prizeIndex].receive,
            // };

            // let respone = await api.list.addList(param);
            // this.listId = respone;

            this.$nextTick(() => {
                this.isShowAwd = true;
                this.prizeing = false;
            });

            // uni.showModal({
            // 	content: tipContent,
            // 	showCancel: false,
            // 	complete: () => {
            // 		this.prizeing = false
            // 	}
            // })
        },
        // 抽奖转盘绘制完成
        handleDrawFinish(res) {
            console.log("抽奖转盘绘制完成", res);

            if (res.ok) {
                // 计算结束绘制的时间
                if (console.timeEnd) {
                    console.timeEnd("绘制转盘用时");
                }
            }

            let stoTimer = setTimeout(() => {
                stoTimer = null;

                uni.hideLoading();
                uni.showToast({
                    title: res.msg,
                    mask: true,
                    icon: "none",
                });
            }, 50);
        },
        /**
         * 确认奖品按钮点击事件
         */
        toConfirmAwd() {
            if (!this.listId) {
                this.isShowAwd = false;
                return;
            }

            let prizeName = this.prizeList[this.winningIndex].prizeName;

            if (prizeName !== "谢谢参与") {
                //这里中奖信息关闭弹框
                this.prizeList[this.winningIndex].receive = 1; //确认领取
                //确认领取更新记录

                let param = {
                    id: this.listId,
                    receive: this.prizeList[this.winningIndex].receive,
                };

                // api.list.updateList(param);

                uni.navigateTo({
                    url: "/pages/address/address?id=" + this.listId,
                });
            }

            this.listId = undefined;

            this.isShowAwd = false;
        },
        // 点击页面其他地方关闭窗口
        closeChuang() {
            this.isShowAwd = false;
        },
        /**
         * 我的奖品
         */
        myHandler() {
            if (!useUserStore.user.useUserStore().token) {
                this.isphone = true;
                return;
            }

            api.list.goodMySelf().then((respone) => {
                if (respone?.prizeId) {
                    this.winningIndex = this.prizeList.findIndex((x) => x.prizeId === respone?.prizeId);
                    this.prizeList[this.winningIndex].receive = respone.receive;
                    this.isShowAwd = true;
                    this.listId = respone.listId;
                } else {
                    uni.showToast({
                        title: "您的礼盒空空如也~",
                        icon: "none",
                    });
                }
            });
        },
        /**
         * 看视频
         */
        gotoVideo() {
            if (!useUserStore.user.useUserStore().token) {
                this.isphone = true;
                return;
            }
            uni.navigateTo({
                url: "/pages/video/video",
            });
        },
        /**
         * 去抽奖
         */
        submitHandler() {
            if (!this.form.name) {
                uni.showToast({
                    title: "姓名必填",
                    icon: "none",
                });
                return;
            }
            if (!this.form.phone) {
                uni.showToast({
                    title: "手机号必填",
                    icon: "none",
                });
                return;
            }

            if (!test.mobile(this.form.phone)) {
                uni.showToast({
                    title: "手机号格式不正确！",
                    icon: "none",
                });
                return;
            }

            useUserStoreDone.loginByPhone({ name: this.form.name, phone: this.form.phone }).then((res) => {
                this.isphone = false;
                uni.showToast({
                    title: "登录成功！",
                    icon: "success",
                });
                this.form.name = "";
                this.form.phone = "";
            });
        },
    },
    onLoad() {
        this.prizeList = [];
        this.getPrizeList();
    },
    onUnload() {
        uni.hideLoading();
    },
};
</script>

<style lang="scss" scoped>
.men {
    background-image: url("http://119.254.154.50:38081/giftApi/mystatic/DZP_BJ.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    min-height: 100%;
    background-color: #044db1;
}
.almost-lottery {
    // background-color: #FF893F;
    // background-image: url(http://119.254.154.50:38081/giftApi/mystatic/DZP_BJ.png);
    width: 100%;
    // height: 100%;
    box-sizing: border-box;
    //  background-size: 100% 100%;
    // background-repeat: no-repeat;
}

.almost-lottery__head {
    position: relative;
    width: 100%;
    height: 300rpx;

    // background: url('~static/images/lottery/top-bg.png') no-repeat center center/cover;
    .action {
        position: relative;
        top: 400rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 480rpx;
        height: 88rpx;
        line-height: 88rpx;
        margin: 0 auto;
        color: #ffffff;
        font-size: 32rpx;
        background-color: rgba(255, 136, 61, 1);
        border-radius: 44rpx;
    }

    .action-shadow {
        box-shadow: 0px 14rpx 0px 0px rgba(235, 112, 36, 1);
    }

    .gold {
        width: 44rpx;
        height: 44rpx;
        margin-right: 10rpx;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        background-image: url("http://119.254.154.50:38081/giftApi/mystatic/images/lottery/gold.png");

        @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
            background-image: url("http://119.254.154.50:38081/giftApi/mystatic/images/lottery/gold@2x.png");
        }

        @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
            background-image: url("http://119.254.154.50:38081/giftApi/mystatic/images/lottery/gold@3x.png");
        }
    }

    .num {
        color: #f9fc31;
    }

    .tip {
        position: relative;
        top: 428rpx;
        color: #ffffff;
        font-size: 24rpx;
        text-align: center;
    }
}

.almost-lottery__wheel {
    text-align: center;

    .almost-lottery__count {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 40rpx 0;
    }

    .text {
        color: #ffffff;
        font-size: 24rpx;
    }
}

.almost-lottery__rule {
    // padding: 0 28rpx;
    color: #fff8cb;

    .rule-head {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 40rpx 0;

        .line {
            flex: 1;
            height: 1px;
            background-color: #fff3a5;
        }

        .title {
            width: 280rpx;
            color: red;
            font-size: 32rpx;
            font-weight: 700;
            line-height: 70rpx;
            text-align: center;
            margin: 0 20rpx;
            border-radius: 8rpx;
            background-image: linear-gradient(0deg, rgba(255, 242, 158, 1), rgba(255, 244, 168, 1));
        }
    }

    .rule-body {
        background: #044db1;
        padding: 30rpx 30rpx;
        font-size: 0.8rem;
        color: #ffffff;
        font-size: 24rpx;
        // padding: 10rpx 0 40rpx;

        .item {
            display: flex;
            margin-bottom: 10rpx;
        }

        .number {
            position: relative;
            top: 4rpx;
            width: 28rpx;
            height: 28rpx;
            line-height: 28rpx;
            text-align: center;
            color: #f63857;
            background: #fff8cb;
            border-radius: 50%;
            margin-right: 10rpx;
        }

        .text {
            flex: 1;
        }

        .item-rule .text {
            display: flex;
            flex-direction: column;
        }
    }
}

.almost-lottery__action-dev {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 400rpx;
    height: 80rpx;
    border-radius: 10rpx;
    text-align: center;
    background-color: red;
    margin: 0 auto 40rpx;

    .text {
        color: #ffffff;
        font-size: 28rpx;
    }
}

.almost-lottery__popup-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .almost-lottery {
        background: transparent;
    }
}

.lihestyle {
    width: 60px;
    height: 60px;
}

.lihefont {
    background: antiquewhite;
    padding: 3px;
    padding-left: 0;
    margin-top: -2px;
    font-size: 15px;
    font-weight: 700;
}

.lihefont2 {
    background: antiquewhite;
    margin-top: -2px;
    font-size: 15px;
    font-weight: 700;
    padding: 3px;
    padding-right: 0;
    padding-left: 8px;
}

.liheContent {
    position: absolute;
    top: 11vh;
    z-index: 1;
    top: 58%;
}
</style>

<style scoped>
.t-bg {
    width: 100%;
    box-sizing: border-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    overflow-x: hidden;
    height: 1200rpx;
    padding-top: 345rpx;
    /* margin-top: 40rpx; */
}

.t-overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    transition: all 0.5s;
}

.t-wan {
    position: absolute;
    width: 100%;
    height: 283rpx;
    top: 0;
    left: 0;
    z-index: 1;
}

.t-wan-lp {
    position: absolute;
    width: 370rpx;
    height: 130rpx;
    top: 186rpx;
    z-index: 0;
    left: calc(50% - 185rpx);
}

.t-choujiang {
    width: 630rpx;
    height: 630rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0rpx auto;
    position: relative;
}

.t-zp {
    width: 577rpx;
    height: 577rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.t-start {
    width: 146rpx;
    height: 171rpx;
    position: absolute;
    z-index: 1;
}

.t-jh {
    width: 456rpx;
    height: 120rpx;
    margin: 0 auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 40rpx;
    color: #980100;
}

.t-fuhuo-text {
    font-size: 30rpx;
    color: #980100;
    width: 100%;
    height: 42rpx;
    margin-top: 14rpx;
}

.t-fh-fs {
    width: 580rpx;
    height: 100rpx;
    margin: 20rpx auto 0rpx;
}

.t-fh-fs view {
    width: 250rpx;
    height: 100rpx;
    background-image: linear-gradient(180deg, #df0236 0%, #dd0227 100%);
    border-radius: 10rpx;
    font-size: 30rpx;
    color: #ffffff;
}

.t-share {
    width: 250rpx;
    height: 100rpx;
    background-image: linear-gradient(180deg, #df0236 0%, #dd0227 100%);
    border-radius: 10rpx;
    font-size: 30rpx;
    color: #ffffff;
}

.t-bottom {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    opacity: 0.99;
    background: #fdc469;
}

.t-luck-wrapper {
    position: relative;
    box-sizing: border-box;
    top: -219rpx;
}

.t-line {
    width: 580rpx;
    height: 1rpx;
    margin: 50rpx auto 0rpx;
    background: #980100;
}

.t-r-title {
    font-size: 28rpx;
    color: #980100;
    height: 40rpx;
    width: 100%;
    margin: 30rpx auto 0rpx;
    width: 585rpx;
}

.t-rule {
    margin: 10rpx auto 0rpx;
    width: 585rpx;
}

.t-rule text {
    font-size: 28rpx;
    color: #980100;
    text-align: justify;
    display: block;
}

.t-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0rpx;
}

.t-video-con {
    width: 100%;
    height: 422rpx;
    background: #fff;
    position: relative;
}

.t-video {
    width: 100%;
    height: 100%;
}

.t-close {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
    width: 34rpx;
    height: 34rpx;
    padding: 30rpx;
    z-index: 9999;
}

.t-nocice {
    position: fixed;
    left: 0rpx;
    top: 0rpx;
    z-index: 999;
    width: 100%;
    height: 40rpx !important;
    box-sizing: border-box;
    font-size: 30rpx;
}

.t-tk-modal {
    width: 632rpx;
    height: 588rpx;
    position: relative;
    box-sizing: border-box;
}

.t-tk-bg {
    width: 100%;
    height: 528rpx;
    background-size: 100% 100%;
}

.t-tk-btn {
    width: 336rpx;
    height: 120rpx;
    position: absolute;
    bottom: 0rpx;
    left: calc(50% - 168rpx);
    font-size: 40rpx;
    color: #980100;
    line-height: 120rpx;
    text-align: center;
    background-size: 100% 100%;
}

.t-flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.t-flex-row-sa {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.t-flex-row-sb {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.t-flex-row-s {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.t-flex-row-s-s {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.t-flex-row-s-e {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
}

.t-flex-row-e {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    line-height: 60rpx;
}

.t-flex-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.t-flex-col-sa {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.t-flex-col-sb {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.t-flex-col-s {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.t-flex-col-s-s {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.t-flex-col-s-e {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

.t-flex-col-e {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.t-xxcy image {
    width: 400rpx;
    height: 148rpx;
    margin-top: 139rpx;
}

.t-xxcy-ts {
    width: 510rpx;
    height: 100rpx;
    background: #fef2cd;
    border-radius: 20rpx;
    font-size: 30rpx;
    color: #d93637;
    margin-top: 43rpx;
}

.t-tk-zj {
}

.t-tk-zj-tip {
    width: 347rpx;
    height: 106rpx;
    margin-top: 44rpx;
}

.t-tk-zj-desc {
    width: 474rpx;
    height: 281rpx;
    background: #fef2cd;
    border-radius: 20rpx;
    margin-top: 2rpx;
}

.t-zj-jp {
    width: 36%;
    height: 50%;
}

.t-zj-jp-desc {
    font-size: 24rpx;
    text-align: center;
    margin-top: 20px;
    color: #d93637;
    width: 420rpx;
}

.t-click-class {
    opacity: 0.7;
}
</style>

<style scoped>
.tanchuang {
    position: absolute;
    top: 30%;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 300px;
    height: 294px;
    background-color: #d7e9ff;
    border-radius: 20px;
}

.tanchuang_top {
    width: 224px;
    height: 37px;
    background: #fef2cd;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -37px;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.tanchuang_top_title {
    margin-top: 11px;
    margin-left: 11px;
    font-weight: 700;
    display: block;
}

.tanchuang_top_img {
    position: absolute;
    top: -16px;
    right: 10px;
}

.register {
    padding: 0 36px;
}

.register_text {
    font-weight: 700;
    margin-bottom: 18px;
    display: block;
}

.register_block {
    margin-top: 20px;
}

.close {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 12px;
    top: 7px;
}
</style>
